<template>
    <div class="item">
        <image :src="detail.pictureUrl" mode="aspectFill" />
        <div class="info">
            <i class="icon-play"></i>
            <p class="title">{{detail.title}}</p>
            <div>
                <span class="flex-1 mar-r10"> {{detail.industryNames}} </span>
                <span class="flex-v-center">
                    <i class="icon-fenxiang color-ccc mar-r10"></i>
                    引流 {{detail.viewCnt}} 次
                </span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {

        }
    },
    props: {
        item: {
            type: Object,
            default: () => ({})
        },
        type: {
            type: String,
            default: ''
        }
    },
    computed: {
        detail() {
            let detail = this.item
            try {
                detail.industryNames = JSON.parse(detail.industryNames) || []
                detail.industryNames = detail.industryNames.map(i => i.industryId).join('，')
                if(detail.industryNames) detail.industryNames = '#' + detail.industryNames
            } catch(e) {
                detail.industryNames = ''
            }
            return detail
        },
    },

}
</script>

<style lang="less" scoped>

.item{
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 15rpx;
    overflow: hidden;
    image{
        width: 100%;
        height: 100%;
        border-radius: 15rpx;
    }
    .info{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        .gradient(#333, transparent, to top, 0, 50%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 10rpx;
        .icon-play{
            font-size: 50rpx;
            line-height: 50rpx;
            width: 50rpx;
            height: 50rpx;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -25rpx;
            margin-top: -25rpx;
            border-radius: 50%;
            box-shadow: 0 0 30rpx #666;
        }
        .title{
            line-height: 40rpx;
            font-weight: bold;
            .overflow(2);
            
        }
        div{
            width: 100%;
            height: 60rpx;
            font-size: 26rpx;
            display: flex;
            align-items: center;
            span{
                .overflow();
            }
        }

    }
    
}
</style>